<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script src="${pageContext.request.contextPath }/js/jquery-1.3.2.min.js" language=javascript type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/js/thickbox.js" language=javascript type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" />
<style>
*{ margin:0 ; padding:0;}
body,html{ font-size:12px;}
ul{ width:480px; list-style-type:none; margin:30px auto;}
li{ float:left; width:60px; height:40px;}
label{margin-left:2px;font-size:20px;}
input{ margin-left:5px;}
em{margin-right:10px;}
.ok{background:#CCC; width:100px; height:22px; line-height:22px; margin:20px auto; cursor:pointer; text-align:center; border:1px solid green;}
</style>

<html style="overflow-y: visible;">
    <jsp:include page="../../../include/IncludeMain.jsp"></jsp:include>
  <body style="overflow-y: visible!important;overflow-y: scroll;">
	  <form action="${pageContext.request.contextPath }/pages/business/ModelRule.do?act=save" name="myForm" id="myForm" method="post">
	    	<table class="mainTable">
				<thead>
					<tr class="tableController">
						<th colspan="2">
							<h3>楦型编辑</h3>
						</th>
					</tr>
					<tr>
						<th>&nbsp;	</th>
						<th class="errorTip" style='<c:if test="${empty message}">display:none</c:if>'>
							<c:forEach items="${message}" var="m">
								${m }
							</c:forEach>
						</th>
					</tr>
					<tr class="tableTitle">
						<th>
							<h3>&nbsp;</h3>
						</th>
						<th>
							<h3>&nbsp;</h3>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td width="200" align="right"><h4>楦号:&nbsp;&nbsp;</h4></td>
						<td>
							<input type="text" validation="required" name="modelRule.model_id" id="model_id" value="${modelRule.model_id}"/>
							<input type="hidden" name="modelRule.id" id="id" value="${modelRule.id}"/> 
							<em style="color:red;">*</em>
						</td>
					</tr> 
					<tr>
						<td align="right"><h4>防水台:&nbsp;&nbsp;</h4></td>
						<td>
							<input style="color:#909090" class="thickbox" name="waterproof1" id="waterproof1" type="text" style="width:150px" alt="#TB_inline?height=120&width=500&inlineId=size" value="小" onclick="setId(this.id);"/>
							<input style="color:#909090" class="thickbox" name="waterproof2" id="waterproof2" type="text" style="width:150px" alt="#TB_inline?height=120&width=500&inlineId=size" value="中" onclick="setId(this.id);"/>
							<input style="color:#909090" class="thickbox" name="waterproof3" id="waterproof3" type="text" style="width:150px" alt="#TB_inline?height=120&width=500&inlineId=size" value="大" onclick="setId(this.id);"/>
						</td>
					</tr> 
					<tr>
						<td align="right"><h4>内增高:&nbsp;&nbsp;</h4></td>
						<td>
							<input style="color:#909090" class="thickbox" name="innerheight1" id="innerheight1" type="text" style="width:150px" alt="#TB_inline?height=120&width=500&inlineId=size" value="小" onclick="setId(this.id);"/>
							<input style="color:#909090" class="thickbox" name="innerheight2" id="innerheight2" type="text" style="width:150px" alt="#TB_inline?height=120&width=500&inlineId=size" value="中" onclick="setId(this.id);"/>
							<input style="color:#909090" class="thickbox" name="innerheight3" id="innerheight3" type="text" style="width:150px" alt="#TB_inline?height=120&width=500&inlineId=size" value="大" onclick="setId(this.id);"/>
						</td>
					</tr> 
					<tr>
						<td align="right"><h4>跟:&nbsp;&nbsp;</h4></td>
						<td>
							<input style="color:#909090" class="thickbox" name="heel1" id="heel1" type="text" style="width:150px" alt="#TB_inline?height=120&width=500&inlineId=size" value="小" onclick="setId(this.id);"/>
							<input style="color:#909090" class="thickbox" name="heel2" id="heel2" type="text" style="width:150px" alt="#TB_inline?height=120&width=500&inlineId=size" value="中" onclick="setId(this.id);"/>
							<input style="color:#909090" class="thickbox" name="heel3" id="heel3" type="text" style="width:150px" alt="#TB_inline?height=120&width=500&inlineId=size" value="大" onclick="setId(this.id);"/>
						</td>
					</tr> 
					<tr>
						<td align="right"><h4>备注:&nbsp;&nbsp;</h4></td>
						<td><textarea cols="40" rows="5" name="modelRule.comments" id="comments">${modelRule.comments}</textarea></td>
					</tr> 
				</tbody>
				<tfoot>
					<tr  class="tableController_bottom">
						<td align="center">
							&nbsp;
						</td>
						<td align="left">
							<a class="button" href="javascript:void(0)" onclick="this.blur(); save();'return false';"><span><img src="${pageContext.request.contextPath }/js/kui/icons/disk.png" align="absmiddle"/>&nbsp;保存</span></a>
							<a class="button" href="javascript:void(0)" onclick="this.blur(); history.go(-1);'return false';"><span><img src="${pageContext.request.contextPath }/js/kui/icons/anticlockwise.png" align="absmiddle"/>&nbsp;返回</span></a>
						</td>
					</tr>
				</tfoot>
		</table>
		</form>
		<div id="size" style="display:none">
  			<ul id="inputbox">
    			<li><label><em>33</em><input type="checkbox" /></label></li>
    			<li><label><em>34</em><input type="checkbox" /></label></li>
    			<li><label><em>35</em><input type="checkbox" /></label></li>
    			<li><label><em>36</em><input type="checkbox" /></label></li>
    			<li><label><em>37</em><input type="checkbox" /></label></li>
    			<li><label><em>38</em><input type="checkbox" /></label></li>
    			<li><label><em>39</em><input type="checkbox" /></label></li>
    			<li><label><em>40</em><input type="checkbox" /></label></li>
  			</ul>
  			<div style="clear:both"></div>
 			<div class="ok" onclick="tb_remove(),OK()">确定</div>
		</div>
		<script type="text/javascript">
			
			var inputId;
			var formId = 'myForm';
			var valid = new KUI.Validation({formId: formId, immediate: true});
			function save(){
				if(valid.validate()){
					document.getElementById(formId).submit();
				}
			}

			function setId(id){
				inputId = id;
			}
						
			function OK(){
				$("#"+inputId).css("color","#000");
				document.getElementById(inputId).value = "";
	  			var list = document.getElementById("inputbox");
	  			var flag = 0;
	  			for(var i=0;i<8;i++){
		  			if(list.getElementsByTagName("input")[i].checked==true){
		  				if(0 != flag)
		  					document.getElementById(inputId).value+=",";
		  				flag = 1;
		  				var j=0;
		  				j = i+33;
						document.getElementById(inputId).value+=j;
						list.getElementsByTagName("input")[i].checked=false;
					}
		  		}
		  		if(flag == 0){
		  			$("#"+inputId).css("color","#909090");
		  			if(inputId.charAt(inputId.length-1)==1){
		  				document.getElementById(inputId).value = "小";
		  			}else if(inputId.charAt(inputId.length-1)==2){
		  				document.getElementById(inputId).value = "中";
				  	}else if(inputId.charAt(inputId.length-1)==3){
		  				document.getElementById(inputId).value = "大";
				  	}
		  		}
		    }

		    function load(){
			    if('${modelRule}' != ''){
			    	var waterproof = ('${modelRule.waterproof}').split('/');
			    	var innerheight = ('${modelRule.innerheight}').split('/');
			    	var heel = ('${modelRule.heel}').split('/');
			   		for(var i = 0; i < 3; i+=1){
			    		if(waterproof[i] != ""){
			    			$("#waterproof"+(i+1)).css("color","#000");
			    			document.getElementById("waterproof"+(i+1)).value = waterproof[i];
						}
						if(innerheight[i] != ""){
							$("#innerheight"+(i+1)).css("color","#000");
							document.getElementById("innerheight"+(i+1)).value = innerheight[i];
						}
						if(heel[i] != ""){
							$("#heel"+(i+1)).css("color","#000");
							document.getElementById("heel"+(i+1)).value = heel[i];
						}
					}
			    }
		    }
		    load();
		</script>
  </body>
</html>
